<template>
	<view class="ShoppingCart bigestBox">
		<view class="title flex" @click="showEdit=!showEdit">
			编辑
		</view>
		<div class="AllContent flexDeCo boxSize_bb">
			<view class="shoppingContent flex boxSize_bb" v-for="(item,index) in shoppingCarData" :key="index">
				<template>
					<template v-if="item.selected && showEdit">
						<image src="/static/images/ShoppingCart/selected.png" mode="" class="selected"
							@click="selectGood(index,false)"></image>
					</template>
					<template v-else-if="!item.selected && showEdit">
						<image src="/static/images/ShoppingCart/noSelect.png" mode="" class="selected"
							@click="selectGood(index,true)"></image>
					</template>
					<image :src="item.url" mode="" class="goodImg"></image>
					<view class="item flexDeCo detail">
						<view class="top flex">
							<view class="t_left">{{item.name}}</view>
							<view class="t_right flex">
								<image src="/static/images/ShoppingCart/decrease.png" mode="" class="tr_decrease">
								</image>
								<text class="tr_cout">{{item.cout}}</text>
								<image src="/static/images/ShoppingCart/increase.png" mode="" class="tr_increase">
								</image>
							</view>
						</view>
						<view class="middle">{{item.size}}cm</view>
						<view class="bottom flex">
							<view class="b_one">{{item.currentPrice}}￥</view>
							<view class="b_two">
								{{item.prePrice}}￥
							</view>
						</view>
					</view>
				</template>

			</view>

		</div>
		<view class="totalPrice boxSize_bb flex">
			<view class="tp_left flex">
				<template v-if="selected">
					<image src="/static/images/ShoppingCart/noSelect.png" mode="" class="tpl_select"
						@click="changeSelect(false)"></image>
				</template>
				<template v-else>
					<image src="/static/images/ShoppingCart/selected.png" mode="" class="tpl_select"
						@click="changeSelect(true)">
					</image>
				</template>
				<view class="tpl_total">
					合计：
				</view>
				<view class="tpl_totalPrice">￥60000.00</view>

			</view>
			<view class="tp_right" @click="checkout">结算</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showEdit: true,
				shoppingCarData: [{
						url: "/static/images/HotelRoomList/dataTest1.png",
						name: "酒店鹅绒枕芯",
						currentCout: "1",
						totalCout: 1,
						totalPrice: 5,
						size: "220x240cm",
						currentPrice: 3000,
						prePrice: 3500,
						selected: true,
						cout: 1
					},
					{
						url: "/static/images/HotelRoomList/dataTest1.png",
						name: "酒店鹅绒枕芯",
						currentCout: "1",
						size: "220x240cm",
						currentPrice: 3000,
						prePrice: 3500,
						selected: false,
						cout: 1
					}
				],
				selected: false
			};
		},
		methods: {
			changeSelect(flag) {
				this.selected = flag
				console.log("change", flag);
			},
			selectGood(index, flag) {
				console.log(index, flag)
				this.shoppingCarData[index].selected = flag
			},
			checkout() {
				uni.navigateTo({
					url: "/pages/CheckoutPage/CheckoutPage"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.ShoppingCart {
		padding-top: 24rpx;
		color: #222222;
		font-family: 'PingFang SC';
		font-weight: 400;
		letter-spacing: 0px;
		font-size: 28rpx;

		.title {
			font-size: 28rpx;
			margin-right: 30rpx;
			margin-bottom: 4rpx;
			justify-content: flex-end;
		}

		.AllContent {
			flex-wrap: wrap;
			padding-bottom: 128rpx;

			.shoppingContent {
				align-items: center;
				padding: 30rpx;
				background: #FFFFFF;
				margin: 20rpx auto 0 auto;
				// width: 750rpx;

				.selected {
					width: 40rpx;
					height: 40rpx;

				}

				.goodImg {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;
					margin-left: 20rpx;
				}

				.detail {
					margin-left: 20rpx;

					.top {
						.t_left {
							font-weight: 500;
							font-size: 34rpx;
						}

						.t_right {
							margin-left: 54rpx;

							.tr_decrease {
								width: 40rpx;
								height: 40rpx;
							}

							.tr_increase {
								width: 40rpx;
								height: 40rpx;
								margin-left: 40rpx;

							}

							.tr_cout {
								font-size: 28rpx;
								margin-left: 40rpx;
							}
						}
					}

					.middle {
						font-size: 24rpx;
						color: #00000059;
						margin-top: 8rpx;

					}

					.bottom {
						margin-top: 44rpx;

						.b_one {
							font-weight: 500;
							font-size: 30rpx;
							color: #FF4D00;

						}

						.b_two {
							font-size: 24rpx;
							text-decoration: line-through;
							color: #00000059;
							margin-left: 20rpx;

						}
					}
				}
			}

		}

		.totalPrice {
			width: 750rpx;
			// height: 128rpx;
			// height: 196rpx;
			height: 128rpx;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			padding-top: 20rpx;
			padding-left: 30rpx;
			padding-right: 20rpx;
			position: fixed;
			bottom: 0;

			.tp_left {
				.tpl_select {
					width: 40rpx;
					height: 40rpx;
				}

				.tpl_total {
					margin-left: 20rpx;
				}

				.tpl_totalPrice {
					font-weight: 500;
					color: #FF4D00;
					margin-left: 4rpx;

				}


			}

			.tp_right {
				width: 200rpx;
				height: 88rpx;
				border-radius: 8rpx;
				background: #0F4C97;
				font-size: 34rpx;
				line-height: 88rpx;
				color: #FFFFFF;
				text-align: center;

			}

		}
	}
</style>